<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./assets/layui/css/layui.css" />
  </head>
  <body>
    <div class="layui-container">
      <form action="" class="layui-form">
        <div class="layui-form-item">
          <label class="layui-form-label">年选择器</label>
          <div class="layui-input-block">
            <input id="year" type="text" class="layui-input" />
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">年月选择器</label>
          <div class="layui-input-block">
            <input id="month" type="text" class="layui-input" />
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">年月日选择器</label>
          <div class="layui-input-block">
            <input id="date" type="text" class="layui-input" />
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">时分秒选择器</label>
          <div class="layui-input-block">
            <input id="time" type="text" class="layui-input" />
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">年月日时分秒选择器</label>
          <div class="layui-input-block">
            <input id="datetime" type="text" class="layui-input" />
          </div>
        </div>
      </form>
    </div>

    <script src="./assets/layui/layui.js"></script>
    <script>
      layui.use(["laydate"], function () {
        var laydate = layui.laydate;
        laydate.render({
          elem: "#year",
          type: "year",
        });
        laydate.render({
          elem: "#month",
          type: "month",
        });
        var ins1 = laydate.render({
          elem: "#date", // 默认就是date 可不传
          type: "date",
          range: true, // 是否开启时间段选择
          format: "yyyy年MM月dd日", //自定义格式 可任意组合
          value: "2018年08月18日 - 2019年06月08日", // 初始值 必须遵循format参数设定的格式
          isInitValue: false, //是否允许填充初始值，默认为 true 2.3+
          // isPreview: false, //禁用面板左下角选择值的预览，默认 true 2.6.6+
          min: "2018-08-17", // 最小时间
          max: 7, //最大时间 7 天后
          trigger: "click", // 默认值：focus，如果绑定的元素非输入框，则默认事件为：click
          show: false, // 是否默认显示
          // position: "fixed", 定位方式 默认 abolute  fixed static
          zIndex: "233", // 默认 66666666
          // showBottom: false, // 是否显示底部栏
          // btns: ["clear", "now", "confirm"], // 默认值：['clear', 'now', 'confirm'] 内置可识别的值有：clear、now、confirm
          // lang: "en", // cn en
          // theme: "#molv", // 主题 default  molv grid #颜色值
          calendar: true, // 是否显示公历 默认false
          // 标注重要日子
          mark: {
            "0-12-31": "跨年", //每年12月31日
            "0-0-10": "工资", //每个月10号
            "2018-8-15": "", //具体日期
            "2018-8-20": "预发", //如果为空字符，则默认显示数字+徽章
          },
          // 控件初始打开的回调
          ready: function (date) {
            console.log(date); //得到初始的日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
            ins1.hint(laydate.getEndDate()); // 控件弹出提醒
            // laydate.getEndDate(month, year) 获取指定年月的最后一天，month默认为当前月，year默认为当前年
          },
          // 日期时间被切换后的回调
          change: function (value, date, endDate) {
            console.log(value); //得到日期生成的值，如：2017-08-18
            console.log(date); //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
            console.log(endDate); //得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。
          },
          // 控件选择完毕后的回调
          done: function (value, date, endDate) {
            console.log(value); //得到日期生成的值，如：2017-08-18
            console.log(date); //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
            console.log(endDate); //得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。
          },
        });
        laydate.render({
          elem: "#time",
          type: "time",
        });
        laydate.render({
          elem: "#datetime",
          type: "datetime",
        });

        // laydate.render({
        //   elem: "#test-range", //开始时间和结束时间所在 input 框的父选择器
        //   //设置开始日期、日期日期的 input 选择器
        //   range: ["#startDate", "#endDate"], //数组格式为 layui 2.6.6 开始新增
        // });
      });
    </script>
  </body>
</html>
